<template>
  <div class="container">
    <layout-card class="layoutCard" headline="巡查巡检执行情况" :hasButton="true">
      <div class="time-btn-group1">
        <radioButtonGroup v-model="radioPaxValue"  :changeValue="radioValue1" :radioOptions="timeOptions"
          @change="radioChange1" />
      </div>
      <el-row :gutter="12" style="padding:0 0 16px 0;">
        <el-col :span="6">
          <el-card shadow="never"
            :body-style="{ backgroundColor: '#E7FCFD', padding: '10px' }">
            <div style="display: inline-block;">
              <h3>全部</h3>
              <p>{{ countAll || 0 }}</p>
            </div>
            <el-image style="float:right;display:block;width:54px;height:54px" :src="image.monitorWordOrderAll" />
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="never"
            :body-style="{ backgroundColor: '#F2FCE0', padding: '10px' }">
            <div style="display: inline-block;">
              <h3>已完成</h3>
              <p>{{ countEnd || 0 }}</p>
            </div>
            <el-image style="float:right;display:block;width:54px;height:54px" :src="image.monitorWordOrderCompleted" />
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="never"
            :body-style="{ backgroundColor: '#FFFCE2', padding: '10px' }">
            <div style="display: inline-block;">
              <h3>执行中</h3>
              <p>{{ countDoing || 0 }}</p>
            </div>
            <el-image style="float:right;display:block;width:54px;height:54px" :src="image.monitorWordOrderExecuting" />
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="never"
            :body-style="{ backgroundColor: '#F4E8FF', padding: '10px' }">
            <div style="display: inline-block;">
              <h3>未开始</h3>
              <p>{{ countReady || 0 }}</p>
            </div>
            <el-image style="float:right;display:block;width:54px;height:54px" :src="image.monitorWordOrderNoStart" />
          </el-card>
        </el-col>
      </el-row>

      <table-common :pagination="false" :columns="inspectionColumns" height="240"
        @sort-change="handleSortChange" :table-data="paxTable"></table-common>
    </layout-card>
    <layout-card class="layoutCard" headline="设备维修情况" :hasButton="true"
      v-model="search" :buttonFilters="buttonOptions" @search-change="getData"
      @search-reset="searchReset">
      <div class="time-btn-group2">
        <radioButtonGroup v-model="value" :changeValue="radioValue"
          :key="radioValue" :radioOptions="timeOptions" @change="radioChange" />
      </div>
      <el-row :gutter="12" style="padding:0 0 16px 0;">
        <el-col :span="6">
          <el-card shadow="never"
            :body-style="{ backgroundColor: '#E7FCFD', padding: '10px' }">
            <div style="display: inline-block;">
              <h3>全部</h3>
              <p>{{ allData || 0 }}</p>
            </div>
            <el-image style="float:right;display:block;width:54px;height:54px" :src="image.monitorWordOrderAll" />
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="never"
            :body-style="{ backgroundColor: '#F2FCE0', padding: '10px' }">
            <div style="display: inline-block;">
              <h3>已完成</h3>
              <p>{{ completeData || 0 }}</p>            
            </div>
            <el-image style="float:right;display:block;width:54px;height:54px" :src="image.monitorWordOrderCompleted" />
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="never"
            :body-style="{ backgroundColor: '#FFFCE2', padding: '10px' }">
            <div style="display: inline-block;">
              <h3>执行中</h3>
              <p>{{ executeData || 0 }}</p>
            </div>
            <el-image style="float:right;display:block;width:54px;height:54px" :src="image.monitorWordOrderExecuting" />
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="never"
            :body-style="{ backgroundColor: '#F4E8FF', padding: '10px' }">
            <div style="display: inline-block;">
              <h3>未开始</h3>
              <p>{{ nostartData || 0 }}</p>
            </div>
            <el-image style="float:right;display:block;width:54px;height:54px" :src="image.monitorWordOrderNoStart" />
          </el-card>
        </el-col>
      </el-row>
      <div class="container">
        <div class="tBody">
          <table-scroll :columns="repairColumns" :loading="loading"
            :disabled="disabled" :table-data="repTable" size="normal" height="240"
            :pagination="pager" class="scroll-table" @scroll="scrollLoad"
            @sort-change="handleSortChange" :infinite-scroll-distance="20">
            <template #urgency="{ row }">
              <el-text type="danger" v-if="row['urgency'] === '1'">紧急</el-text>
              <el-text v-else-if="row['urgency'] === '2'">一般</el-text>
            </template>
            <template #repAcceptState="{ row }">
              <!-- 提示：此处状态值 -->
              <el-text v-if="row['repAcceptState'] === '01'">待指派</el-text>
              <el-text v-else-if="row['repAcceptState'] === '02'">待领取</el-text>
              <el-text type="danger"
                v-else-if="row['repAcceptState'] === '03'">待维修</el-text>
              <el-text type="warning"
                v-else-if="row['repAcceptState'] === '04'">待验收</el-text>
              <el-text type="success"
                v-else-if="row['repAcceptState'] === '05'">已完结</el-text>
              <el-text v-else-if="row['repAcceptState'] === '06'">已挂起</el-text>
            </template>
          </table-scroll>
        </div>
      </div>
    </layout-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, onBeforeMount, onMounted, watch, reactive, onUnmounted } from 'vue'
import LayoutCard from '@/components/LayoutCard/index.vue'
import TableCommon from '@/components/TableCommon/index.vue'
import { inspectionColumns, repairColumns } from './config/columns'
import radioButtonGroup from '@/components/RadioButtonGroup/index.vue'
import { usePagination } from 'vue-request'
import {
  getAllData, getFindData, getPageData, getComplete, getExecute, getNostart, getPatrolPage, getCountAllData,
  getCountEndData, getCountDoingData, getCountReadyData
} from '@/api/monitor/workOrder'
import { orderBy } from 'lodash'
import TableScroll from '@/components/TableScroll/index.vue'
import { ElImage, ElMessage } from 'element-plus'
import { image } from "@/assets/index";

// 巡查巡检内容
/**
 * 巡查巡检表格数据
 */
const paxTable = ref([])
// 保存查询到的所有
const countAll = ref()
// 保存查询到完成的
const countEnd = ref()
// 保存查询到执行中
const countDoing = ref()
// 保存查询到未完成
const countReady = ref()

// const paxValue = ref(1)
const radioPaxValue = ref(5)

//巡查巡检执行情况按钮
const radioChange1 = (paxValue: any) => {
  radioPaxValue.value = paxValue
  getData1()
}


// 设备维修内容
// 保存查询到的所有
const allData = ref()
// 保存查询到完成的
const completeData = ref()
// 保存查询到执行中
const executeData = ref()
// 保存查询到未完成
const nostartData = ref()

// 定义按钮组的初始值
const radioValue = ref(5)
const radioValue1 = ref(5)
// 查询的参数
const search = ref<FilterDataType>({})

/**
 * 维修表格数据
 */
const repTable = ref<any[]>([])
const value = ref(5)

const timeOptions = ref([
  { label: '年', value: 5 },
  { label: '季度', value: 4 },
  { label: '月', value: 3 },
  { label: '周', value: 2 },
  { label: '日', value: 1 }
])

//排序
const orderParams = reactive({
  pageNum: 1,
  pageSize: repTable.value.length,
  condition: {    
    repApplyState: '02',
    queryType: radioValue.value,
  }
})
const handleSortChange = (column: any) => {
  const prop = column.prop
  let order = column.order
  if (order === 'descending') {
    order = 'DESC'
  } else if (order === 'ascending') {
    order = 'ASC'
  }
  orderParams.condition.order = [{ column: prop, method: order }]
  //当前数据排序状态，和数量
  orderParams.pageSize = repTable.value.length 
  getTabData(orderParams) 
}

/**
 * 获取表格数据
 * @param tabParams 请求参数
 */
const getTabData = (tabParams: any) => {
  getPageData(tabParams).then((res) => {
    res.data.list.forEach((e: any) => {
      e.name = e.creator.name
      e.organNames = e.creator.organName
      e.phone = e.creator.phone
    })
    repTable.value = res.data.list
    loading.value = false
  })
}
/**
 * 点击对应时间按钮查询功能
 * @param value 
 */
// 按钮组的点击事件
const radioChange = (value: any) => {
  radioValue.value = value
  //重置条件，及数据
  params.condition.queryType = value
  params.pageNum = 1
  params.pageSize = 10
  disabled.value = false
  getData()
}

const loading = ref(true);
//禁用无限滚动
const disabled = ref(false);

/**
 * 表格滚动加载
 * @params params -分页请求参数
 * author 刘润
 * date 2023-9-14
 */
// 查询的参数
const params = reactive({
  pageNum: 1,
  pageSize: 10,
  condition: {
    queryType: radioValue.value,
  }
})
const scrollLoad = () => {
  if (disabled.value) return;
  disabled.value = true

  if (params.pageNum == 1) params.pageNum = 2
  getPageData(params).then((res) => {
    // 当无法再获取数据或者数据量大于999条时，停止滚动
    if (repTable.value.length >= allData.value || repTable.value.length >= 999) {
      disabled.value = true
      ElMessage('没有更多数据了')
      return
    } else {
      res.data.list.forEach((e: any) => {
        e.name = e.creator.name
        e.organNames = e.creator.organName
        e.phone = e.creator.phone
      })
      repTable.value.push(...res.data.list)

      params.pageNum++
      disabled.value = false
    }
    loading.value = false
  }).catch(error => {
    ElMessage.error('加载失败')
  });
}


/**
 * 数据统计
 * @params params -数据统计参数
 * author 熊灿
 * date 2023-9-14
 */
const getData = () => {

  // 设备维修相关
  getTabData(params)

  // // 查询所有的
  // getAllData(radioValue.value).then((res) => {
  //   allData.value = res.data
  // })
  // // 查询完成的
  // getComplete(radioValue.value).then((res) => {
  //   completeData.value = res.data
  // })
  // //查询执行中的
  // getExecute(radioValue.value).then((res) => {
  //   executeData.value = res.data
  // })
  // // 查询未完成的
  // getNostart(radioValue.value).then((res) => {
  //   nostartData.value = res.data
  // })
}

const getData1 = () => {
  // 巡查巡检相关
  // 分页查询
  getPatrolPage().then((res) => {
    res = [res]
    paxTable.value = res
  })

  // // 统计全部
  // getCountAllData().then((res) => {
  //   countAll.value = res
  // })
  // // 统计已完成
  // getCountEndData().then((res) => {
  //   countEnd.value = res
  // })
  // // 统计执行中
  // getCountDoingData().then((res) => {
  //   countDoing.value = res
  // })
  // // 统计未开始
  // getCountReadyData().then((res) => {
  //   countReady.value = res
  // })  
}

// 页面加载时显示数据
onMounted(() => {
  getData1()
  getData()
})

// 间隔30s刷新数据
const getDataTimer = setInterval(() => {
  disabled.value = false
  orderParams.pageSize = repTable.value.length 
  getData();
  // getTabData(orderParams)
}, 30000)

onUnmounted(() => {
  clearInterval(getDataTimer)
})
</script>

<style lang="less" scoped>
h3 {
  font-weight: 500;
  font-size: 12px;
  padding: 0 0 6px 0;
}

p {
  font-weight: 500;
  font-size: 20px;
}

.container {
  position: relative;
}
.layoutCard{
  position: relative;
  /deep/ .card-content{
    margin: 0;
  }
}
.time-btn-group1 {
  position: absolute;
  right: 46px;
  top: 24px;
  z-index: 999;
}

.time-btn-group2 {
  position: absolute;
  right: 46px;
  top: 24px;
  z-index: 999;
}

/* 表格 */
.container {
  width: 100%;
  height: 100%;
  padding: 0;

  .tBody {
    width: 100%;
    height: auto;
    background-color: #FFF;
    overflow-y: auto;

    .scroll-table {
      height: 220px;
    }
  }
}
</style>
